<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title>更改标注的大小写</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css' rel='stylesheet'/>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>

<div id='map'></div>
<script>
    mapboxgl.accessToken = 'pk.eyJ1Ijoiam9obmZvcnJlc3QiLCJhIjoiY2tjeXBrN3JjMGM0ZzJ3cnl0OWJscHlxYSJ9.GsQMG6Tfi05l4BbRqegJeQ';

    var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
        center: [-116.231, 43.604], // starting position [lng, lat]
        zoom: 11 // starting zoom
    });

    map.on('load', function () {
        map.addLayer({
            'id': 'off-leash-areas',
            'type': 'symbol',
            // data from opendata.cityofboise.org/
            'source': {
                'type': 'geojson',
                'data': 'https://docs.mapbox.com/mapbox-gl-js/assets/boise.geojson'

            },
            "layout": {
                "icon-image": 'dog-park-11',
                "text-field": ['format',
                    ['upcase', ['get', 'FacilityName']], {'font-scale': .8},
                    '\n', {},
                    ['downcase', ['get', 'Comments']], {'font-scale': .6}],
                "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
                "text-offset": [0, 0.6],
                "text-anchor": "top"
            }
        });

    });
</script>
</div>

</body>
</html>